<template>
  <div class="tutorial">
    <h2>🔀 动态路由学习</h2>
    <p>动态路由通过在路径中声明参数（如 <code>:id</code>）来匹配多种 URL。</p>

    <h3>概念要点</h3>
    <ul>
      <li>在路由路径中使用占位符：<code>/users/:id</code>。</li>
      <li>通过 <code>route.params</code> 读取路径参数。</li>
      <li>参数可以配合校验、转换与 <code>props</code> 传递。</li>
    </ul>

    <h3>示例配置</h3>
    <pre class="code"><code>const routes = [
  { path: '/users/:id', name: 'UserDetail', component: UserDetailView, props: true }
]</code></pre>

    <h3>示例组件读取参数</h3>
    <pre class="code"><code>import { useRoute } from 'vue-router'
const route = useRoute()
// 当前用户ID：route.params.id</code></pre>

    <h3>构建路径（演示）</h3>
    <div class="build">
      <label>用户ID：</label>
      <input v-model="userId" type="number" class="input" />
      <div class="path">示例路径：<code>/users/{{ userId }}</code></div>
      <button class="btn" @click="navigateExample">模拟导航（需配置对应路由）</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userId = ref(101)

function navigateExample() {
  // 仅演示：项目需在 router/index.js 配置 /users/:id 才能正常访问
  router.push(`/users/${userId.value}`)
}
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
.code { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow:auto; }
.build { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.input { padding:6px 10px; border:1px solid #d1d5db; border-radius:6px; width:100px; }
.path { padding:6px 10px; background:#f8fafc; border:1px dashed #94a3b8; border-radius:6px; }
.btn { padding:8px 12px; background:#4f46e5; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.btn:hover { background:#4338ca; }
</style>